<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>法向量</title>
    <link href="../css/base.css" rel="stylesheet"></link>
  </head>
  <body>
    <div class="box"></div>

    <script src="../js/three.js"></script>
    <script type="module">
      import {
        createBaseObj,
        testAnimation,
        createViewController,
        addHelpLine,
      } from '../js/myThree.js'

      const oBox = document.getElementsByClassName('box')[0]

      const { scene, camera, renderer } = createBaseObj(oBox)
      addHelpLine(scene)

      /** 初始 */
      const init = () => {
        drawClassContent()

        const point = new THREE.PointLight(0xffffff)
        point.position.set(25, 25, 25)
        scene.add(point)

        const point2 = new THREE.PointLight(0xffffff)
        point2.position.set(25, -25, 25)
        scene.add(point2)

        // const geometry = new THREE.BufferGeometry()

        // const vertices = new Float32Array([
        //   100, -0, 100, -100, -0, 100, -100, -0, -100,

        //   -100, -0, -100, 100, -0, -100, 100, -0, 100,
        // ])
        // geometry.setAttribute(
        //   'position',
        //   new THREE.BufferAttribute(vertices, 3)
        // )
        // const material = new THREE.MeshBasicMaterial({
        //   color: 0x460011,
        //   opacity: 0.7,
        //   transparent: true
        // })
        // const mesh = new THREE.Mesh(geometry, material)
        // scene.add(mesh)

        animation()
      }

      let mesh
      /** 绘制课程内容 */
      const drawClassContent = () => {
        const geometry = new THREE.BufferGeometry()

        /** 类型数组创建顶点数据 */
        const vertices = new Float32Array([
          0, 0, 0, 50, 0, 0, 0, 100, 0,

          0, 0, 0, 0, 0, 100, 50, 0, 0,
        ])

        /** 创建属性缓存对象 */
        geometry.setAttribute(
          'position',
          new THREE.BufferAttribute(vertices, 3)
        )
        const colors = new Float32Array([
          1, 0, 0, 0, 1, 0, 0, 0, 1,

          1, 1, 0, 0, 1, 1, 1, 0, 1,
        ])
        geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3))
        const normals = new Float32Array([
          0, 0, 1, 0, 0, 1, 0, 0, 1,

          0, 1, 0, 0, 1, 0, 0, 1, 0,
        ])
        geometry.setAttribute('normal', new THREE.BufferAttribute(normals, 3))

        const material = new THREE.MeshLambertMaterial({
          color: 0x00ff11,
          side: THREE.DoubleSide // 两面可见
        })

        mesh = new THREE.Mesh(geometry, material)
        scene.add(mesh)
      }

      /** 渲染中 */
      const doSth = () => {
        // mesh.rotateX(0.1)
        // point_light.position.y -= 0.1
      }

      const control = createViewController(renderer.domElement, camera)
      const animation = testAnimation({ scene, camera, renderer }, doSth)

      init()
    </script>
  </body>
</html>
